<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>梦幻海底</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <script src="/mobile/js/dsbridge.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
    background-color: transparent;
    transform: translate3d(0, 0, 0);
    font-family: 'Microsoft Yahei';
  }

  html,
  body {
    height: 100vh;
    background-color: transparent;
  }

  [v-cloak] {
    display: none;
  }

  #app {
    width: 100vw;
    height: 100%;
    font-size: 0;
    overflow: hidden;
    position: relative;
  }

  .item_main {
    position: fixed;
    width: 100%;
    height: 128vw;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: url(bg.jpg) no-repeat;
    background-size: 100% 100%;
  }

  .item_cont {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .close-btn {
    position: absolute;
    width: 6.4vw;
    height: 6.4vw;
    top: 2.67vw;
    right: 2.67vw;
    z-index: 99;
  }

  .item_cont .title {
    width: 18.3125rem;
    height: 6.5625rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -3.25rem;
  }

  .item_turntable_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .item_turntable_box .item_turntable {
    width: 17.6875rem;
    height: 17.6875rem;
    background: url(turntable.png) no-repeat;
    background-size: 100% 100%;
    margin: .4375rem auto 0;
    overflow: hidden;
    position: relative;
  }

  .item_prize_box {
    width: 13.375rem;
    height: 13.375rem;
    margin: 2.1875rem;
    position: relative;
  }

  .prize_img {
    width: 3.375rem;
    height: 6.6875rem;
    position: absolute;
    left: 50%;
    margin-left: -1.6875rem;
    top: 0;
  }

  .prize_img:nth-child(1) {
    transform: rotate(40deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(2) {
    transform: rotate(80deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(3) {
    transform: rotate(120deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(4) {
    transform: rotate(160deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(5) {
    transform: rotate(200deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(6) {
    transform: rotate(240deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(7) {
    transform: rotate(280deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(8) {
    transform: rotate(320deg);
    transform-origin: bottom center;
  }

  .prize_img:nth-child(9) {
    transform: rotate(360deg);
    transform-origin: bottom center;
  }
  .prize_cont {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .prize_cont>p {
    font-size: .5rem;
    color: #DC502A;
    text-align: center;
    line-height: 1.25rem;
  }

  .prize_cont>img {
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
  }

  .item_btn {
    width: 4.875rem;
    height: 4.875rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .item_pointer {
    width: 4.75rem;
    height: 6.6875rem;
    position: absolute;
    left: 50%;
    margin-left: -2.375rem;
    top: 0;
    transform: rotate(15deg);
    transform-origin: bottom center;
  }

  .tan_btn {
    width: 90%;
    margin: 2.3125rem auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tan_img {
    width: 6.625rem;
    height: 2.75rem;
    background: url(tan_img.png) no-repeat;
    background-size: 100% 100%;
  }

  .tan_text {
    font-size: .875rem;
    color: #672F11;
    text-align: center;
    line-height: 1.25rem;
    margin-top: .125rem;
    font-weight: 500;
  }

  .tan_gold {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tan_gold>img {
    width: 1.125rem;
    height: 1.125rem;
  }

  .tan_gold>span {
    font-size: .625rem;
    color: #0945c5;
    margin-left: .125rem;
    font-weight: 500;
  }

  /* 中奖弹窗 */
  .prize_popup {
    width: 21.375rem;
    height: 21.375rem;
    background: url(zjtc.png)no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .prize_popup_cont {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .prize_popup_cont .prizetitle {
    width: 12.75rem;
    height: 4.375rem;
    position: absolute;
    left: 50%;
    margin-left: -6.375rem;
    top: -1.125rem;
  }

  .prize_popup_cont .close {
    width: 1.375rem;
    height: 1.375rem;
    position: absolute;
    top: 1.375rem;
    right: 2.0625rem;
  }

  .prizeList {
    width: 90%;
    height: 15rem;
    position: absolute;
    left: 50%;
    top: 3.4375rem;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: auto;
  }

  .prizeLi {
    width: 33.33%;
    height: 7.5rem;
  }

  .bigImg {
    transform: scale(1.7);
  }

  .prize_img_bg {
    width: 5.0625rem;
    height: 5.0625rem;
    background: url(paopao.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .prize_img_bg>img {
    width: 3.125rem;
    height: 3.125rem;
  }

  .prizeLi>p {
    font-size: .75rem;
    text-align: center;
    color: #fff;
    line-height: 1.25rem;
  }

  .prizeLi .gold_text {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gold_text>img {
    width: .75rem;
    height: .75rem;
  }

  .gold_text>span {
    font-size: .6875rem;
    color: #FFED57;
    margin-left: .125rem;
  }

  .zlyc {
    width: 7.8125rem;
    height: 2.75rem;
    position: absolute;
    left: 50%;
    bottom: -0.8125rem;
    transform: translateX(-50%);
  }

  /* 侧边菜单 */
  .item_right {
    width: 2.8125rem;
    height: 6.875rem;
    position: absolute;
    right: 0;
    top: 10.75rem;
  }

  .item_right>img {
    width: 2.8125rem;
    height: 2.8125rem;
  }

  /* 奖池弹窗 */
  .jc_main {
    width: 21.625rem;
    height: 24.0625rem;
    background: url(jc_bg.png)no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .jc_cont {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .jc_main .jc_cont .jc_title {
    width: 7.8125rem;
    height: 2.75rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1rem;
  }

  .jc_main .jc_cont .jc_close {
    width: 1.375rem;
    height: 1.375rem;
    position: absolute;
    top: .625rem;
    right: 1.125rem;
  }

  .jc_cont>p {
    font-size: .75rem;
    color: #FDD949;
    text-align: center;
    line-height: 1.75rem;
    position: absolute;
    width: 100%;
    top: 1.75rem;
  }

  .jc_list {
    width: 84%;
    height: 18.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 3.4375rem;
    left: 50%;
    transform: translateX(-50%);
    overflow: auto;
  }

  .jc_li {
    width: 33.33%;
    height: 7.125rem;
    overflow: hidden;
  }

  .jc_img {
    width: 5.25rem;
    height: 5.25rem;
    background: url(jc_img.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  .jc_img>img {
    width: 3.125rem;
    height: 3.125rem;
    margin: .625rem auto;
    display: block;
  }

  .jc_img>p {
    width: 5rem;
    height: 1.375rem;
    font-size: .625rem;
    line-height: 1.375rem;
    color: #fff;
    text-align: center;
    background: url(bottom_bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: .125rem;
  }

  .jc_gold {
    width: 3.75rem;
    height: 1rem;
    background: rgba(0, 0, 0, .7);
    border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .3125rem auto;
  }

  .jc_gold>img {
    width: .6875rem;
    height: .6875rem;
    margin-left: .1875rem;
  }

  .jc_gold>p {
    font-size: .75rem;
    color: #fff;
    margin-right: .1875rem;
    margin-left: .1875rem;
  }

  .jc_cont .rule_text {
    width: 84%;
    font-size: .625rem;
    color: #fff;
    line-height: 1.125rem;
    position: absolute;
    top: 18.75rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;

  }

  .jc_cont .wf_text {
    position: absolute;
    width: 84%;
    height: 19.5rem;
    left: 50%;
    transform: translateX(-50%);
    top: 2.375rem;
    overflow: auto;
  }

  .wf_text>p {
    margin-top: 1rem;
    font-size: .6875rem;
    color: #fff;
    line-height: 1rem;
    text-align: left;
  }

  /* 中奖记录 */
  .roll_box {
    width: 21.6875rem;
    height: 1.875rem;
    background: #3891FF;
    margin: 2.375rem auto 0;
  }

  .roll_cont {
    overflow: hidden;
  }

  .roll_list>p {
    font-size: .75rem;
    color: #fff;
    text-align: center;
    line-height: 1.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .roll_list>p .nickname {
    overflow: hidden;
    /* 确保超出的内容会被隐藏 */
    white-space: nowrap;
    /* 确保文本在一行内显示，不换行 */
    text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
    max-width: 7.5rem;
    color: #FFE749;
  }

  .roll_list>p>span {
    color: #FFE749;
    margin: 0 .1875rem;
  }

  .popup {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
  }
  .total-coin {
    font-size: 0.75rem;
    color: #fff;
    top: 4.4375rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -2rem);
  }

  .total-coin>img {
    width: .75rem;
    height: .75rem;
    vertical-align: middle;
  }

  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="item_main">
      <div class="item_cont">
        <!-- 标题 -->
        <img src="title.png" class="title" />
        <div class="item_turntable_box">
          <img id="close" class="close-btn" src="close.png" alt="" @click="closeWebview">
          <!-- 中奖记录滚动 -->
          <div class="roll_box" style="height: 1.625rem">
            <div class="roll_cont" id="air_wrap" style="height: 1.625rem">
              <div class="roll_list" id="air_list">
                <p v-show="history.length>0" v-for="item of history" :key="item" style="height: 1.625rem">
                  恭喜 <span class="nickname">{{item.userNickname}}</span> 获得<span>{{item.giftName}}x{{item.count}}</span></span>
                </p>
              </div>
              <h2 v-show="!history.length" style="height: 1.625rem;line-height:1.625rem;">暂无数据</h2>
            </div>
          </div>
          <!-- 转盘 -->
          <div class="item_turntable">
            <div class="item_prize_box">
              <div class="prize_img" v-for="(item,index) in prizeList" :key="index">
                <div class="prize_cont">
                  <!-- <p>{{item.name}}</p> -->
                  <img :src="item.img" />
                </div>
              </div>
              <img src="pointer.png" class="item_pointer" id="turntable" :style="{transform:rotate_angle,transition:second}" />
            </div>
            <img src="btn.png" class="item_btn" />
          </div>
          <!-- 抽奖次数 -->
          <div class="tan_btn">
            <div class="tan_img" v-for="(item, index) in btnItems" :key="index" @click="btnActive(item.times)">
              <p class="tan_text">{{item.title}}</p>
              <p class="tan_gold">
                <img src="/mobile/img/recharge-shell.png" />
                <span>{{item.shell}}</span>
              </p>
            </div>
          </div>
        </div>
        <!-- 右侧菜单 -->
        <div class="item_right">
          <img src="jiangchi.png" @click="isJackpot = true" />
          <img src="wanfa.png" @click="isRule = true" />
        </div>
      </div>
    </div>
    <!-- 背景遮罩 -->
    <div class="popup" v-if="isGetPrize">
      <!-- 中奖弹窗 -->
      <div class="prize_popup">
        <div class="prize_popup_cont">
          <img src="prizetitle.png" class="prizetitle" />
          <img src="close.png" class="close" @click="prizeClose()" />
          <div class="total-coin">本次获得：<img class="shell" src="/mobile/img/recharge-shell.png" />{{getPrizeList[0].totalAwardCoin}}</div>
          <div class="prizeList">
            <div class="prizeLi" :class="btnType == 0 ?'bigImg':''" v-for="(item,index) in getPrizeList" :key="index">
              <div class="prize_img_bg">
                <img :src="item.url" />
              </div>
              <p>{{item.name}} x{{item.qty}}</p>
              <div class="gold_text">
                <img src="/mobile/img/recharge-shell.png" />
                <span>{{item.awardCoin}}</span>
              </div>
            </div>
          </div>
          <img src="zlyc.png" class="zlyc" @click="btnActive(btnType)" />
        </div>
      </div>
    </div>
    <!-- 奖池弹窗 -->
    <div class="popup" v-if="isJackpot">
      <div class="jc_main">
        <div class="jc_cont">
          <img src="jc_title.png" class="jc_title" />
          <img src="close.png" class="jc_close" @click="isJackpot = false" />
          <div class="jc_list">
            <div class="jc_li" v-for="(item, index) in prizeList" :key="index">
              <div class="jc_img">
                <img :src="item.img" alt="">
                <p>{{item.name}}</p>
              </div>
              <div class="jc_gold">
                <img src="/mobile/img/recharge-shell.png" />
                <p>{{item.shell}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 玩法弹窗 -->
    <div class="popup" v-if="isRule">
      <div class="jc_main">
        <div class="jc_cont">
          <img src="wf_title.png" class="jc_title" />
          <img src="close.png" class="jc_close" @click="isRule = false" />
          <div class="wf_text">
            <p>1.梦幻海底活动限时开放期间,用户可消耗2000贝壳获得一次开启机会,每次开启百分百获得道具,开启后礼物可以在背包中查看、赠送。</p>
            <p>2.此活动是提升用户互动的功能,仅供娱乐交流使用,平台严厉打击以盈利为目的的礼物交易行为,用户开启获得的礼物不得线上、线下交易或反向兑换成现金或有价值的商品,只能在平台互动消耗使用。</p>
            <p>3.利用程序漏洞等非正常手段获取礼物以及违反上述第2条规则的用户,贝贝语音有权没收该用户在平台内的所有资产并封禁账户。</p>
            <p>4.此活动与苹果公司无关</p>
            <p>5.对此活动，贝贝语音保留最终解释权
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      token: '',
      roomId: '',
      activityId: '',
      deviceType: null,
      info: '', //toast信息
      isShow: true, //弹窗遮罩
      btnType: 0, //抽奖按钮类型 0:开启1次 1:开启10次 4:开启20次
      prizeId: '', //奖品id
      btnItems: [{
        title: '开启1次',
        times: 0,
        shell: 2000
      }, {
        title: '开启10次',
        times: 1,
        shell: 20000
      }, {
        title: '开启20次',
        times: 4,
        shell: 40000
      }],
      prizeList: [{
          id: '1829098845400915969',
          img: 'https://oss.zgbbyy.com/gift/93e24efbeb594dcf980283381614cbd6.png',
          shell: '100',
          name: '比心',
          idx: 40
        },
        {
          id: '1829421570908676097',
          img: 'https://oss.zgbbyy.com/gift/777f1bf9eaf44d649383bf86c7cc3b93.png',
          shell: '500',
          name: '告白气球',
          idx: 80
        },
        {
          id: '1829417337501179905',
          img: 'https://oss.zgbbyy.com/gift/0aa8f4db403140f58a000ad25649234d.png',
          shell: '1000',
          name: '求爱玫瑰',
          idx: 120
        },
        {
          id: '1871825464456306690',
          img: 'https://oss.zgbbyy.com/gift/50b16812c45c4ff8a729a5e6ab458afb.png',
          shell: '1880',
          name: '新年红包',
          idx: 160
        },
        {
          id: '1829001751155630081',
          img: 'https://oss.zgbbyy.com/gift/51e7afe09fec4a809a41f627124b48f1.png',
          shell: '5200',
          name: '鲜花礼盒',
          idx: 200
        },
        {
          id: '1821744804836470786',
          img: 'https://oss.zgbbyy.com/gift/a57c317bb20d4066b3f020c188e86151.png',
          shell: '10000',
          name: '梦幻爱丽丝',
          idx: 240
        },
        {
          id: '1871825307098603522',
          img: 'https://oss.zgbbyy.com/gift/21f0464e5f2f47e18f6299291fa5c865.png',
          shell: '20000',
          name: 'Hello 2025',
          idx: 280
        },
        {
          id: 1872153591673970689,
          img: 'https://oss.zgbbyy.com/gift/344c7afeb61144d3ada356bea98a50ed.png',
          shell: '50000',
          name: '跨年城堡',
          idx: 320
        },
        {
          id: '1871824835092602882',
          img: 'https://oss.zgbbyy.com/gift/59d2b8bd2359432d8a5fc4e46454d110.png',
          shell: '150000',
          name: '跨洋恋曲',
          idx: 360
        }
      ], //转盘奖品数据
      rotate_angle: "rotate(0deg)", //转盘默认初始角度
      second: "transform 1.5s ease-in-out", //转盘速度
      start_rotating_deg: 0,
      getPrizeList: [], //获得的奖品
      isGetPrize: false, //获取奖励弹窗
      isJackpot: false, //奖池弹窗
      isRule: false, //规则
      history: [], //中奖记录
      loading: false, // 按钮锁
    }
  },
  created() {
    this.token = dsBridge.call('getToken', '')
    this.roomId = dsBridge.call('getRoomId', '')
    var userAgent = navigator.userAgent
    if (userAgent.toLowerCase().includes('android')) {
      this.deviceType = '1'
    } else if (/(iPhone|iPad|iPod)/.test(userAgent)) {
      this.deviceType = '2'
    } else {
      // 鸿蒙
      this.deviceType = '3'
    }
    const parse = (queryStr) => {
      const str = queryStr.replace(/^\?/, '')
      return str.split('&').reduce((pre, key) => {
        const [k, v] = key.split('=')
        pre[decodeURIComponent(k)] = decodeURIComponent(v)
        return pre
      }, {})
    }

    var data = parse(location.search)
    this.activityId = data.activityId
    // 播报数据
    this.getPrizeHistory()
  },
  mounted() {
    // 中奖记录滚动
    this.scrollHistory()
  },
  methods: {
    closeWebview() {
      dsBridge.call('closeWebview', '')
    },
    btnActive(type) {
      if (this.loading) {
        return
      }
      if (!this.activityId) {
        this.$toast('玩法信息获取失败')
        return
      }
      if (!this.roomId) {
        this.$toast('房间信息获取失败')
        return
      }
      if (!this.token) {
        this.$toast('用户信息获取失败')
        return
      }
      if (!this.deviceType) {
        this.$toast('设备信息获取失败')
        return
      }
      // 点击再来一次,中奖弹窗消失
      this.isGetPrize = false
      // 存储点击类型
      this.btnType = type;
      // 重置中奖数据
      this.getPrizeList = []
      // 获取中奖结果
      this.draw(this.btnType)

    },
    getPrizeHistory() {
      request.post(`/api/business/app/extractBigPrizeH5/pageList`, {
        limit: 50,
        page: 1
      },{
        headers: {
          token: this.token
        }
      }).then(res => {
        this.history = res.data.list
      })
    },
    draw(type) {
      this.loading = true
      var query = `activityId=${this.activityId}&extractQty=${type}&roomId=${this.roomId}&systemType=${this.deviceType}`
      var str = ISCRYPT ? `args=${encrypt(query)}` : query
      this.$toast.loading({
        forbidClick: true,
        duration: 0
      })
      request.get(`/api/business/app/extractRecordMergeH5/extract?${str}`, {
        headers: {
          token: this.token
        }
      }).then(res => {
        this.getPrizeList = res.data
        this.$toast.clear()
        var prize = this.prizeList.find(item => item.id === res.data[0].awardId)
        this.rotating(prize.idx)
      })
    },
    // 中奖地盘转动
    rotating(degNum) {
      let oTurntable = document.querySelector("#turntable");
      var rand_circle = 3; //默认3圈

      var deg = this.start_rotating_deg + rand_circle * 360 + degNum - (this.start_rotating_deg % 360); //将要旋转的度数
      this.start_rotating_deg = deg; //下一次旋转的开始度数

      this.rotate_angle = "rotate(" + deg + "deg)"
      oTurntable.style.transform = "rotate(" + deg + "deg)";

      // 显示中奖
      setTimeout(() => {
        this.isGetPrize = true
        this.loading = false
      }, 2000)
    },
    // 中奖弹窗关闭
    prizeClose() {
      this.isGetPrize = false
    },
    // 中奖记录滚动
    scrollHistory() {
      let time = 1;
      return setInterval(() => {
        let list = document.querySelector("#air_list");
        let flag = list.childNodes.length - 1;
        let wrap = document.querySelector("#air_wrap");
        if (time > flag) {
          list.style.cssText = "transform: translateY(0px); transition: none;";
          time = 1;
        }
        list.style.cssText =
          "transform: translateY(" +
          -wrap.clientHeight * time +
          "px); transition: all 0.5s;";
        time++;
      }, 1500);
    },
  }
});
</script>

</html>